<template>
  <div v-loading="loading" style="padding: 66px 50px 40px;border-radius: 10px;max-width: 930px;background-color: #ffffff;box-shadow:4px 4px 8px #d3d2d2">
    <a-timeline>
      <a-timeline-item color="red" style="font-size: 18px">
        <template #dot>
          <clock-circle-outlined style="font-size: 26px;padding-top: 18px" />
        </template>
<!--        <div style="font-size: 30px;">{{presentDate}}</div>-->
        <h2 style="color: #666666">{{presentDate}}</h2>
      </a-timeline-item>
      <a-timeline-item v-for="(item,index) in currentEssayList"
                       :key="index"
                       style="color: #666666;font-size: 16px;"

      >
        <span>
          <calendar-two-tone /> {{item.datetime}}<br/>
          <a-button style="color: #666666;font-size: 16px;" type="text" @click="handleClick(item.essayId)">
            {{item.title}}
          </a-button>
        </span>
      </a-timeline-item>
    </a-timeline>
  </div>
  <div style="text-align: center">
    <a-pagination v-model:current="currentPage" :defaultPageSize="10" :total="essayListByDate.length" @change="changePage" />
  </div>
</template>

<script setup>

import {ClockCircleOutlined,CalendarTwoTone} from "@ant-design/icons-vue"
import { ref, watchEffect} from "vue";
import request from "@/utils/request";
import {useRoute,useRouter} from "vue-router";
import {useStore} from "vuex";


const loading=ref(false)
const store=useStore()
const route=useRoute()
const router=useRouter()
const date=ref([])
const presentDate=ref('')
const essayListByDate=ref([])
const currentPage=ref(1)
const currentEssayList=ref([])



watchEffect(()=>{
  loading.value=true
  console.log("route.params.date  :",route.params.date)
  if (route.params.date!==undefined){
    if (route.params.date==='')
      date.value[0]='2'
    else
      date.value=route.params.date

    if (date.value[0]==='2')
      presentDate.value="文章总览 - "+store.getters.getAllCount.essayCount
    else
      presentDate.value=date.value[0]+' 文章 - '+date.value[1]
  }

  request.get("essay/get/byDate/"+date.value[0]).then(res=>{
    console.log("essayListByDate  :",res.data)
    essayListByDate.value=res.data
    currentEssayList.value=essayListByDate.value.slice((1-1)*8,1*8)
    loading.value=false
  })
})

const changePage=(page)=>{
  console.log("page  :",page)
  currentEssayList.value=essayListByDate.value.slice((page-1)*8,page*8)
  currentPage.value=page
}

const handleClick = (essayId) => {
  console.log(essayId)
  router.push("/visitor/preview/"+essayId)
}
</script>

<style scoped>

</style>